<template>
    <div class="mine_parent">
        <div class="avatar">
            <div class="username">
                <div class="left">
                    <van-image round width="3rem" height="3rem"
                        src="https://tse3-mm.cn.bing.net/th/id/OIP-C.R_51sqcxCcrFxLag7A_yTQHaLH?rs=1&pid=ImgDetMain" />
                </div>
                <div class="right" style="margin-left:10px;">
                    <div class="text">可乐不加冰</div>
                    <div><van-button style="height: 30px;margin-top:5px;" plain="" round
                            type="default">Lv.8</van-button></div>
                </div>
            </div>
            <div class="icon">
                <van-icon name="arrow" />
            </div>
        </div>
        <div class="grid" style="margin-top: 20px">
            <van-grid square :border="false">
                <van-grid-item v-for="value in list" :key="value.id" :icon="value.icon" :text="value.text"
                    icon-color="#f93b3f" />
            </van-grid>
        </div>
        <div class="music">
            <div class="left">
                <div class="icon">
                    <van-icon name="like" color="#fff" />
                </div>
                <div class="text">
                    <div style="font-weight: bold;margin-bottom: 6px;">我喜欢的音乐</div>
                    <div style="color: #736d6d;font-size: 12px;">188首</div>
                </div>
            </div>
            <div class="right">
                <van-button icon="fire" round type="default" size="mini">心动模式</van-button>
            </div>
        </div>
        <div class="tabs" style="margin-top: 10px;">
            <van-tabs v-model:active="activeName" color="#fd5153" background="#f4f4f4">
                <van-tab title="创建歌单" name="a">
                    <div class="tab">
                        <div class="top">
                            <div class="left">创建歌单(3个)</div>
                            <div class="right" style="margin-right: 10px;color:#736d6d;">
                                <van-icon name="plus" size="20" style="margin-right: 5px;" />
                                <van-icon size="20" name="descending" />
                            </div>
                        </div>
                        <div class="bottom" v-for="item in playList" :key="item.id">
                            <div class="left">
                                <img width="45px" height="45px" :src="item.url" alt="">
                            </div>
                            <div class="right">
                                <div style="font-weight: bold;">{{ item.name }}</div>
                                <div style="color: #736d6d;font-size: 12px;margin-top:6px;">{{ item.num }}首</div>
                            </div>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="收藏歌单" name="b">
                    <div class="tab"></div>
                </van-tab>
                <van-tab title="歌单助手" name="c">
                    <div class="tab"></div>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
const activeName = ref('a')
const list = ref([
    { id: 1, icon: 'shop', text: '本地音乐' },
    { id: 2, icon: 'shop-collect', text: '云盘' },
    { id: 3, icon: 'goods-collect', text: '已购' },
    { id: 4, icon: 'play-circle', text: '最近播放' },
    { id: 5, icon: 'friends', text: '我的关注' },
    { id: 6, icon: 'star', text: '收藏和赞' },
    { id: 7, icon: 'volume', text: '我的播客' },
    { id: 8, icon: 'music', text: '音乐应用' },
]);
const playList = ref([
    { id: 1, url: 'https://img-bsy.txrpic.com/preview/element/00/01/03/44/E-1034453-4AFA904BXZ.jpg?imageMogr2/quality/90/thumbnail/!800x%3E', name: '90后回忆录', num: 30 },
    { id: 2, url: 'https://img.51miz.com/Photo/2017/03/27/06/P217531_e9c5584afdaa7f8106435d4d4dfd2a72.jpeg', name: '车载音乐', num: 59 },
    { id: 3, url: 'https://ts1.cn.mm.bing.net/th/id/R-C.288fbe512f8c490e4a01cc4846ef111a?rik=IbwIbtJ61ulFdQ&riu=http%3a%2f%2fp3.music.126.net%2frNi-bwy5YJ_QI5UKx9kytA%3d%3d%2f6025323720694870.jpg&ehk=Sp1xBbBOVPUQue2%2bzcnaF0K3HfSOrxkLepWaIap11rk%3d&risl=&pid=ImgRaw&r=0', name: '助眠神曲', num: 18 },
])
</script>
<style lang="less" scoped>
.mine_parent {
    height: calc(100vh - 30px);
    background-color: #f4f4f4;
    padding: 10px;

    .avatar {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .username {
            display: flex;

            .right>.text {
                font-weight: bold;
                font-size: 14px;
            }
        }
    }

    .grid {
        border-radius: 10px;
        overflow: hidden;
    }

    .music {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden;
        padding: 10px;

        .left {
            display: flex;

            .icon {
                display: flex;
                width: 50px;
                height: 50px;
                background-color: rgba(0, 0, 0, 0.2);
                justify-content: center;
                align-items: center;
                border-radius: 5px;
                background-image: url(https://tse1-mm.cn.bing.net/th/id/OIP-C.TNE2gqvkCP38r1nda89iagHaEo?rs=1&pid=ImgDetMain);
            }

            .text {
                margin-left: 10px;
            }
        }

    }

    .tabs {
        background-color: #fff;

        .tab {
            border-radius: 10px;
            padding: 5px;
            .top {
                padding: 10px;
                display: flex;
                justify-content: space-between;
                margin-left: 10px;

                .left {
                    font-size: 12px;
                    color: #736d6d;
                }
            }


            .bottom {
                padding: 10px;
                display: flex;

                .left {
                    margin-right: 15px;
                    img {
                        border-radius: 5px;
                    }
                }
                
            }
        }
    }
}
</style>